import type { PtComponent, PtComponentConst } from "@/modules/pt-page/types";
import type { CSSProperties } from 'vue';
import type { PtContainer } from '../../../types';
import { VideoPlayer } from '@/modules/pt-page/plugins';

export const name = 'video';

type ComponentType = typeof name;

export interface Props {
    // 视频地址
    src: string;
    // 封面图
    poster: string;
}

export interface RenderOptions {

}

export interface ThisComponent extends PtComponent<ComponentType, Props, RenderOptions> { }

export const render = (instance: PtContainer, comp: ThisComponent | PtComponentConst): JSX.Element => {
    const { value } = comp;

    const style: CSSProperties = {
        width: '100%',
        height: '100%',
        objectFit: 'cover' as any,
    }

    return (<VideoPlayer src={instance.data.getString(value.src)} poster={instance.data.getString(value.poster)} style={style} />)
}